<template>
  <div class="tire-calculator">
    <div class="sci-fi-container">
      <div class="sci-fi-header">
        <h1 class="glow-text">轮胎周长计算器</h1>
        <div class="sci-fi-decor"></div>
      </div>

      <div class="tab-container">
        <div class="tab-header">
          <div :class="['tab-item', activeTab === 'presets' ? 'active' : '']" @click="activeTab = 'presets'">
            预设尺寸
          </div>
          <div :class="['tab-item', activeTab === 'custom' ? 'active' : '']" @click="activeTab = 'custom'">
            自定义尺寸
          </div>
          <div :class="['tab-item', activeTab === 'speed' ? 'active' : '']" @click="activeTab = 'speed'">
            极速计算
          </div>
        </div>

        <!-- 预设尺寸面板 -->
        <div v-if="activeTab === 'presets'" class="panel">
          <div class="preset-grid">
            <div v-for="(tire, index) in presetTires" :key="index"
              :class="['preset-item', selectedPreset === index ? 'selected' : '']" @click="selectPreset(index)">
              <div class="preset-size">{{ tire.size }}</div>
              <div class="preset-details">{{ tire.speedRating }}</div>
            </div>
          </div>

          <div class="unit-toggle">
            <button :class="[currentUnit === 'mm' ? 'active' : '']" @click="currentUnit = 'mm'">毫米(mm)</button>
            <button :class="[currentUnit === 'cm' ? 'active' : '']" @click="currentUnit = 'cm'">厘米(cm)</button>
            <button :class="[currentUnit === 'inch' ? 'active' : '']" @click="currentUnit = 'inch'">英寸(in)</button>
          </div>

          <button class="sci-fi-button" @click="calculatePresetCircumference">
            <span>计算周长</span>
            <div class="button-effect"></div>
          </button>
        </div>

        <!-- 自定义尺寸面板 -->
        <div v-if="activeTab === 'custom'" class="panel">
          <div class="unit-toggle">
            <button :class="[currentUnit === 'mm' ? 'active' : '']" @click="currentUnit = 'mm'">毫米(mm)</button>
            <button :class="[currentUnit === 'cm' ? 'active' : '']" @click="currentUnit = 'cm'">厘米(cm)</button>
            <button :class="[currentUnit === 'inch' ? 'active' : '']" @click="currentUnit = 'inch'">英寸(in)</button>
          </div>

          <div class="input-group">
            <label for="width">轮胎宽度 (mm)</label>
            <input type="number" id="width" v-model="customTire.width" placeholder="例如: 120" class="sci-fi-input" />
          </div>

          <div class="input-group">
            <label for="aspect-ratio">扁平比 (%)</label>
            <input type="number" id="aspect-ratio" v-model="customTire.aspectRatio" placeholder="例如: 70"
              class="sci-fi-input" />
            <div class="example">扁平比是轮胎高度与宽度的百分比</div>
          </div>

          <div class="input-group" style="margin-bottom: 20px;">
            <label for="rim-diameter">轮毂直径 (英寸)</label>
            <input type="number" id="rim-diameter" v-model="customTire.rimDiameter" placeholder="例如: 12"
              class="sci-fi-input" />
          </div>

          <button class="sci-fi-button" @click="calculateCustomCircumference">
            <span>计算周长</span>
            <div class="button-effect"></div>
          </button>
        </div>

        <!-- 极速计算面板 -->
        <div v-if="activeTab === 'speed'" class="panel">
          <div class="speed-calculator-container">
            <div class="calculator-description">
              <p>此计算器基于以下公式计算最大速度：</p>
              <div class="formula">转速(转/分钟)×轮胎周长×时间×0.9系数</div>
              <p class="note">注意：转速为每分钟转数，实际转速可能有 ±50 转/分钟的误差 </p>
              <b>因各因素 数值仅供参考</b>
            </div>

            <div class="calculator-form">
              <div class="input-group">
                <label for="tire-circumference">轮胎周长 (毫米)</label>
                <div class="input-with-unit">
                  <input type="number" id="tire-circumference" v-model.number="speedCalc.tireCircumference"
                    class="sci-fi-input" min="1" />
                  <span class="input-unit">毫米</span>
                </div>
              </div>

              <div class="input-group">
                <label for="rpm">电机转速 (转/分钟)</label>
                <div class="input-with-unit">
                  <input type="number" id="rpm" v-model.number="speedCalc.rpm" class="sci-fi-input" min="1" />
                  <span class="input-unit">转/分钟</span>
                </div>
                <div class="rpm-range">
                  <span class="low-value">{{ speedCalc.rpm - 50 }}</span>
                  <div class="range-line"></div>
                  <span class="center-value">{{ speedCalc.rpm }}</span>
                  <div class="range-line"></div>
                  <span class="high-value">{{ speedCalc.rpm + 50 }}</span>
                </div>
              </div>

              <button class="sci-fi-button pulse-glow" @click="calculateSpeed">
                <span>计算极速</span>
                <div class="button-effect"></div>
              </button>
            </div>

            <div class="speed-result" v-if="speedCalc.showResult">
              <div class="result-header">
                <span>计算结果</span>
                <div class="scanner-line"></div>
              </div>
              <div class="result-content">
                <div class="result-item">
                  <div class="hologram-effect"></div>
                  <p>理论极速: <span class="highlight">{{ speedCalc.calculatedSpeed.toFixed(2) }} km</span></p>
                </div>
                <div class="result-item animated-bg">
                  <div class="hologram-effect"></div>
                  <div class="speed-range">
                    <p>考虑误差范围:</p>
                    <div class="range-values">
                      <span>{{ speedCalc.minSpeed.toFixed(2) }} km</span>
                      <div class="speed-range-bar">
                        <div class="range-progress"></div>
                      </div>
                      <span>{{ speedCalc.maxSpeed.toFixed(2) }} km</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 计算结果 -->
        <div v-if="showResult && activeTab !== 'speed'" class="result-panel">
          <div class="result-header">计算结果</div>
          <div class="result-content">
            <div class="result-item">
              <div class="hologram-effect"></div>
              <p>轮胎周长: {{ result.circumference }} {{ unitText }}</p>
            </div>
            <div class="result-item">
              <div class="hologram-effect"></div>
              <p>轮胎直径: {{ result.diameter }} {{ unitText }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 FAQ 部分 -->
      <div class="faq-section">
        <h2 class="section-title">常见问题 <span class="small-text">FAQ</span></h2>

        <div class="faq-container">
          <div class="faq-item" v-for="(faq, index) in faqs" :key="index" @click="toggleFaq(index)">
            <div class="faq-question">
              <span>{{ faq.question }}</span>
              <div class="faq-icon" :class="{ 'open': faq.isOpen }">
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="faq-answer" :class="{ 'open': faq.isOpen }">
              <p v-html="faq.answer"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 轮胎预设数据
const presetTires = [
  { size: "90/90-10", width: 90, aspectRatio: 90, rimDiameter: 10, maxLoad: "170kg", speedRating: "J2.15" },
  { size: "100/80-10", width: 100, aspectRatio: 80, rimDiameter: 10, maxLoad: "200kg", speedRating: "J2.15-J2.5" },
  { size: "100/90-10", width: 100, aspectRatio: 90, rimDiameter: 10, maxLoad: "225kg", speedRating: "J2.15-J2.5" },
  { size: "110/80-10", width: 110, aspectRatio: 80, rimDiameter: 10, maxLoad: "230kg", speedRating: "J2.5-J2.75" },
  { size: "120/70-10", width: 120, aspectRatio: 70, rimDiameter: 10, maxLoad: "210kg", speedRating: "J2.75-J3.5" },
  { size: "120/90-10", width: 120, aspectRatio: 90, rimDiameter: 10, maxLoad: "240kg", speedRating: "J3.0-J3.5" },
  { size: "130/70-10", width: 130, aspectRatio: 70, rimDiameter: 10, maxLoad: "230kg", speedRating: "J3.0-J3.5" },
  { size: "130/90-10", width: 130, aspectRatio: 90, rimDiameter: 10, maxLoad: "260kg", speedRating: "J3.0-J3.5" },
  { size: "90/90-12", width: 90, aspectRatio: 90, rimDiameter: 12, maxLoad: "160kg", speedRating: "J2.15" },
  { size: "110/70-12", width: 110, aspectRatio: 70, rimDiameter: 12, maxLoad: "175kg", speedRating: "J2.5-J2.75" },
  { size: "120/70-12", width: 120, aspectRatio: 70, rimDiameter: 12, maxLoad: "200kg", speedRating: "J2.75-J3.5" },
  { size: "130/70-12", width: 130, aspectRatio: 70, rimDiameter: 12, maxLoad: "225kg", speedRating: "J3.0-J3.5" },
  { size: "140/70-12", width: 140, aspectRatio: 70, rimDiameter: 12, maxLoad: "250kg", speedRating: "J3.5-J4.0" },
  { size: "120/60-13", width: 120, aspectRatio: 60, rimDiameter: 13, maxLoad: "220kg", speedRating: "J2.75-J3.5" },
  { size: "120/70-13", width: 120, aspectRatio: 70, rimDiameter: 13, maxLoad: "230kg", speedRating: "J2.75-J3.5" },
  { size: "130/60-13", width: 130, aspectRatio: 60, rimDiameter: 13, maxLoad: "250kg", speedRating: "J3.0-J3.5" },
  { size: "130/70-13", width: 130, aspectRatio: 70, rimDiameter: 13, maxLoad: "230kg", speedRating: "J3.0-J3.5" },
  { size: "140/60-13", width: 140, aspectRatio: 60, rimDiameter: 13, maxLoad: "270kg", speedRating: "J3.5-J4.0" }
];

// 状态变量
const activeTab = ref('presets');
const currentUnit = ref('mm');
const selectedPreset = ref(null);
const customTire = ref({
  width: '',
  aspectRatio: '',
  rimDiameter: ''
});
const showResult = ref(false);
const result = ref({
  circumference: '',
  diameter: ''
});

// 极速计算器状态
const speedCalc = ref({
  tireCircumference: 1359, // 默认2000毫米周长
  rpm: 1300, // 默认1300转/分钟
  showResult: false,
  calculatedSpeed: 0,
  minSpeed: 0,
  maxSpeed: 0
});

// FAQ 数据
const faqs = ref([
  {
    question: '如何正确选择电动车轮胎尺寸？',
    answer: '选择轮胎时，需考虑车型适配性、承重能力、路况适应性和个人习惯。最好参考原车配置，或咨询专业人士建议。',
    isOpen: false
  },
  {
    question: '轮胎周长与电控有什么关系？',
    answer: '电控系统通过测量车轮转速来计算速度，而准确的轮胎周长是确保速度计算准确的关键因素。尤其对于<b>慢牛电控</b>系统，输入正确的轮胎周长可以确保速度显示和里程计算更加准确。',
    isOpen: false
  },
  {
    question: '更换不同尺寸的轮胎需要注意什么？',
    answer: '更换不同尺寸轮胎时，需重新计算轮胎周长并更新电控系统参数。还需注意轮胎与车架、制动系统的兼容性，确保安全行驶。',
    isOpen: false
  },
  {
    question: '为什么计算出的周长与实际有误差？',
    answer: '计算公式基于理想状态，而实际轮胎受载荷、气压、磨损等因素影响，会产生一定误差。最准确的方法是实测轮胎在负载状态下的实际滚动周长。',
    isOpen: false
  },
  {
    question: '慢牛电控产品如何设置轮胎周长参数？',
    answer: '慢牛电控产品通常通过控制器的参数设置界面进行轮胎周长参数设置，具体操作请参考产品说明书或联系我们的客服团队获取详细指导。',
    isOpen: false
  },
  {
    question: '极速计算公式中的0.9系数是什么意思？',
    answer: '0.9系数是考虑实际行驶中的各种损耗因素（如摩擦、风阻、传动效率等）后的修正系数，使计算结果更接近实际情况。',
    isOpen: false
  }
]);

// 计算属性
const unitText = computed(() => {
  switch (currentUnit.value) {
    case 'mm': return '毫米';
    case 'cm': return '厘米';
    case 'inch': return '英寸';
    default: return '毫米';
  }
});

// 方法
function selectPreset(index) {
  selectedPreset.value = index;
}

function calculatePresetCircumference() {
  if (selectedPreset.value === null) {
    alert('请选择一个轮胎尺寸');
    return;
  }

  const tire = presetTires[selectedPreset.value];
  calculateCircumference(tire.width, tire.aspectRatio, tire.rimDiameter);
}

function calculateCustomCircumference() {
  const { width, aspectRatio, rimDiameter } = customTire.value;

  if (!width || !aspectRatio || !rimDiameter) {
    alert('请输入所有必要的尺寸');
    return;
  }

  calculateCircumference(
    parseFloat(width),
    parseFloat(aspectRatio),
    parseFloat(rimDiameter)
  );
}

function calculateCircumference(width, aspectRatio, rimDiameter) {
  // 计算轮胎高度 (mm)
  const tireHeight = width * (aspectRatio / 100);

  // 计算轮胎直径 (mm)
  const rimDiameterMm = rimDiameter * 25.4; // 英寸转毫米
  const tireDiameter = rimDiameterMm + (2 * tireHeight);

  // 计算周长 (mm)
  const circumference = Math.PI * tireDiameter;

  // 根据选择的单位显示结果
  let circumferenceValue, diameterValue;

  switch (currentUnit.value) {
    case 'mm':
      circumferenceValue = circumference.toFixed(2);
      diameterValue = tireDiameter.toFixed(2);
      break;
    case 'cm':
      circumferenceValue = (circumference / 10).toFixed(2);
      diameterValue = (tireDiameter / 10).toFixed(2);
      break;
    case 'inch':
      circumferenceValue = (circumference / 25.4).toFixed(2);
      diameterValue = (tireDiameter / 25.4).toFixed(2);
      break;
  }

  result.value = {
    circumference: circumferenceValue,
    diameter: diameterValue
  };

  showResult.value = true;
}

// 计算极速
function calculateSpeed() {
  if (!speedCalc.value.tireCircumference || speedCalc.value.tireCircumference <= 0) {
    alert('请输入有效的轮胎周长');
    return;
  }

  if (!speedCalc.value.rpm || speedCalc.value.rpm <= 0) {
    alert('请输入有效的电机转速');
    return;
  }

  // 将毫米转换为厘米
  const circumferenceInCm = speedCalc.value.tireCircumference / 10;

  // 极速 = 转速 × 轮胎周长 × 60 × 0.9系数
  // 将厘米转换为km: 厘米 ÷ 100000 = km
  const circumferenceInKm = circumferenceInCm / 100000;

  speedCalc.value.calculatedSpeed = speedCalc.value.rpm * circumferenceInKm * 60 * 0.9;
  speedCalc.value.minSpeed = (speedCalc.value.rpm - 50) * circumferenceInKm * 60 * 0.9;
  speedCalc.value.maxSpeed = (speedCalc.value.rpm + 50) * circumferenceInKm * 60 * 0.9;

  speedCalc.value.showResult = true;
}

// FAQ展开/关闭方法
function toggleFaq(index) {
  faqs.value[index].isOpen = !faqs.value[index].isOpen;
}
</script>

<style lang="scss" scoped>
.tire-calculator {
  height: 100%;
  overflow: auto;
  background: linear-gradient(135deg, var(--bg-dark) 0%, #162432 50%, #1c2f3e 100%);
  color: var(--text-color);
  font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  padding: 20px;
  box-sizing: border-box;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      radial-gradient(circle at 20% 35%, rgba(255, 58, 58, 0.05) 0%, transparent 25%),
      radial-gradient(circle at 75% 65%, rgba(255, 58, 58, 0.05) 0%, transparent 25%);
    pointer-events: none;
    z-index: 0;
  }
}

.sci-fi-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: var(--bg-darker);
  border-radius: 16px;
  padding: 25px 20px;
  box-shadow: 0 0 30px rgba(255, 58, 58, 0.25),
    0 0 8px rgba(255, 58, 58, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0));
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.4),
        rgba(255, 58, 58, 0));
  }
}

.sci-fi-header {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 15px;
}

.glow-text {
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 58, 58, 0.7),
    0 0 20px rgba(255, 58, 58, 0.5);
  letter-spacing: 2px;
  position: relative;
  z-index: 1;

  @media (max-width: 480px) {
    font-size: 22px;
  }
}

.sci-fi-decor {
  width: 60%;
  height: 2px;
  margin: 15px auto 0;
  background: linear-gradient(90deg,
      rgba(255, 58, 58, 0),
      rgba(255, 58, 58, 0.8),
      rgba(255, 58, 58, 0));
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 58, 58, 0.8);
    top: 50%;
    transform: translateY(-50%);
  }

  &::before {
    left: 30%;
  }

  &::after {
    right: 30%;
  }
}

.tab-container {
  position: relative;
  z-index: 1;
}

.tab-header {
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 2px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  font-size: 15px;

  &.active {
    color: var(--primary-color);

    &::before {
      transform: scaleY(1);
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 58, 58, 0.1);
    border-radius: 8px;
    transform: scaleY(0);
    transition: transform 0.3s ease;
    z-index: -1;
  }

  &:hover:not(.active) {
    color: #fff;

    &::before {
      transform: scaleY(0.7);
    }
  }
}

.panel {
  background-color: rgba(7, 15, 25, 0.5);
  border-radius: 10px;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
  padding-bottom: 5px;

  &::-webkit-scrollbar {
    width: 5px;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 58, 58, 0.5);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
  }
}

.preset-item {
  background-color: rgba(15, 35, 50, 0.6);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 58, 58, 0.2);
  position: relative;
  overflow: hidden;

  &:hover {
    border-color: rgba(255, 58, 58, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

    &::after {
      opacity: 1;
    }
  }

  &.selected {
    background-color: rgba(255, 58, 58, 0.15);
    border-color: rgba(255, 58, 58, 0.6);
    box-shadow: 0 0 15px rgba(255, 58, 58, 0.2);
    transform: translateY(-3px);

    &::before {
      opacity: 1;
    }
  }

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0.4),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0.4));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,
        rgba(255, 58, 58, 0.1) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
  }
}

.preset-size {
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  position: relative;
  z-index: 1;
}

.preset-details {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
  position: relative;
  z-index: 1;
}

.unit-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 3px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;

  button {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    position: relative;
    overflow: hidden;
    flex: 1;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 58, 58, 0.2);
      border-radius: 5px;
      z-index: -1;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    &:first-child {
      border-radius: 5px 0 0 5px;
    }

    &:last-child {
      border-radius: 0 5px 5px 0;
    }

    &.active {
      color: var(--primary-color);

      &::before {
        transform: scaleX(1);
      }
    }

    &:not(.active):hover {
      color: #fff;

      &::before {
        transform: scaleX(0.5);
      }
    }
  }
}

.input-group {
  position: relative;

  &:last-child {
    margin-bottom: 20px;

  }
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 500;
}

.sci-fi-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 58, 58, 0.3);
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  transition: all 0.3s;
  position: relative;
  z-index: 1;

  &:focus {
    outline: none;
    border-color: rgba(255, 58, 58, 0.8);
    box-shadow: 0 0 10px rgba(255, 58, 58, 0.2);
  }

  &:hover:not(:focus) {
    border-color: rgba(255, 58, 58, 0.5);
  }
}

.example {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  font-style: italic;
}

.sci-fi-button {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(255, 58, 58, 0.8), rgba(200, 20, 20, 0.8));
  border: none;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(200, 20, 20, 0.3);

  span {
    position: relative;
    z-index: 1;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(200, 20, 20, 0.4);
  }

  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(200, 20, 20, 0.3);
  }

  .button-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    z-index: 0;
  }

  &:hover .button-effect {
    animation: button-shine 2s infinite;
  }
}

@keyframes button-shine {
  0% {
    transform: translateX(-100%);
    opacity: 0.7;
  }

  20% {
    opacity: 0.5;
  }

  60% {
    opacity: 0;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.result-panel {
  margin-top: 25px;
  background-color: rgba(0, 30, 60, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 58, 58, 0.3);
  overflow: hidden;
  animation: fadeIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.result-header {
  padding: 12px 15px;
  background-color: rgba(255, 58, 58, 0.2);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 16px;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0) 0%,
        rgba(255, 58, 58, 0.1) 50%,
        rgba(255, 58, 58, 0) 100%);
    animation: header-shine 3s infinite linear;
  }
}

@keyframes header-shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.result-content {
  padding: 15px 5px;
  background: rgba(0, 20, 40, 0.2);
}

.result-item {
  background-color: rgba(0, 40, 80, 0.3);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  border-left: 3px solid rgba(255, 58, 58, 0.5);
  transition: all 0.3s;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    transform: translateX(3px);
    background-color: rgba(0, 50, 90, 0.4);
  }

  p {
    position: relative;
    z-index: 1;
    font-weight: 500;
    color: #fff;
    margin: 0;
    font-size: 16px;
  }
}

.hologram-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 58, 58, 0.05) 0px,
      rgba(255, 58, 58, 0) 2px);
  opacity: 0.5;
  animation: hologram-scan 8s linear infinite;
  pointer-events: none;
}

@keyframes hologram-scan {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

.section-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 40px 0 20px;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
  text-shadow: 0 0 10px rgba(255, 58, 58, 0.5);

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 58, 58, 0), rgba(255, 58, 58, 0.8), rgba(255, 58, 58, 0));
  }

  .small-text {
    font-size: 16px;
    opacity: 0.7;
    margin-left: 8px;
  }
}

/* FAQ 样式 */
.faq-section {
  margin-top: 40px;
}

.faq-container {
  border-radius: 10px;
  overflow: hidden;
  background-color: rgba(7, 15, 25, 0.4);
}

.faq-item {
  border-bottom: 1px solid rgba(255, 58, 58, 0.2);
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px;
  font-weight: 500;
  color: #fff;
  transition: all 0.3s;
  position: relative;

  &:hover {
    background-color: rgba(255, 58, 58, 0.1);
  }

  span {
    width: calc(100% - 24px);
    font-size: 15px;
  }
}

.faq-icon {
  width: 18px;
  height: 18px;
  position: relative;
  transition: transform 0.3s;

  span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: all 0.3s;

    &:last-child {
      transform: translateY(-50%) rotate(90deg);
    }
  }

  &.open {
    transform: rotate(180deg);

    span:last-child {
      transform: translateY(-50%) rotate(0);
      opacity: 0;
    }
  }
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0, 1, 0, 1);
  background-color: rgba(0, 20, 40, 0.2);

  &.open {
    max-height: 300px;
    transition: all 0.5s cubic-bezier(0.44, 0.01, 0.44, 0.99);
  }

  p {
    padding: 15px 20px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;

    b {
      color: var(--primary-color);
      font-weight: 600;
    }
  }
}

/* 联系我们样式 */
.contact-section {
  margin: 40px 0 10px;
}

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.contact-info {
  flex: 1;
  min-width: 280px;
  background-color: rgba(7, 15, 25, 0.4);
  border-radius: 10px;
  padding: 20px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;

  &:nth-child(2) {
    animation-delay: 0.2s;
  }

  &:nth-child(3) {
    animation-delay: 0.4s;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.contact-icon {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 58, 58, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  position: relative;
  flex-shrink: 0;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(255, 58, 58, 0.6);
    animation: pulse 2s infinite;
  }

  i {
    font-size: 18px;
    color: var(--primary-color);
  }

  .icon-phone::before {
    content: "📞";
  }

  .icon-email::before {
    content: "✉️";
  }

  .icon-address::before {
    content: "📍";
  }
}

.contact-text {
  h3 {
    font-size: 15px;
    margin: 0 0 5px;
    color: var(--primary-color);
    font-weight: 500;
  }

  p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
  }
}

.contact-qrcode {
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(7, 15, 25, 0.4);
  border-radius: 10px;
  padding: 20px;
}

.qrcode-container {
  text-align: center;

  .qrcode-img {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    border: 1px solid rgba(255, 58, 58, 0.3);
    padding: 5px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 58, 58, 0.5);
    }
  }

  p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.3;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

@media (max-width: 480px) {
  .preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sci-fi-container {
    padding: 20px 15px;
  }

  .sci-fi-button {
    padding: 12px 15px;
    font-size: 15px;
  }

  .section-title {
    font-size: 20px;
  }

  .contact-qrcode {
    flex: 1;
  }
}

/* 极速计算器样式 */
.speed-calculator-container {
  max-width: 100%;
}

.calculator-description {
  text-align: center;
  margin-bottom: 25px;

  p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin: 10px 0;
  }

  .formula {
    font-family: "Courier New", monospace;
    background-color: rgba(255, 58, 58, 0.1);
    border-left: 3px solid var(--primary-color);
    padding: 12px 0;
    margin: 15px 0;
    font-size: 15px;
    color: var(--primary-color);
    text-shadow: 0 0 5px rgba(255, 58, 58, 0.3);
    border-radius: 4px;
    overflow: hidden;
  }

  .note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
  }
}



.calculator-form {
  display: grid;
  gap: 20px;
  margin-bottom: 30px;
}

.input-with-unit {
  position: relative;
}

.input-unit {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  pointer-events: none;
}

.rpm-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);

  .low-value,
  .high-value {
    flex: 1;
  }

  .center-value {
    color: var(--primary-color);
    font-weight: bold;
  }

  .range-line {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0.2),
        rgba(255, 58, 58, 0.4));
    flex: 2;
  }
}

.speed-result {
  margin-top: 25px;
  background-color: rgba(0, 30, 60, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 58, 58, 0.3);
  overflow: hidden;
  animation: fadeIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.result-header {
  padding: 12px 15px;
  background-color: rgba(255, 58, 58, 0.2);
  color: var(--primary-color);
  font-weight: 600;
  font-size: 16px;
  position: relative;
  overflow: hidden;

  .scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 58, 58, 0),
        rgba(255, 58, 58, 0.8),
        rgba(255, 58, 58, 0));
    animation: scan-line 2s infinite linear;
  }

}

.highlight {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(255, 58, 58, 0.5);
}

.speed-range {
  p {
    margin-bottom: 10px;
  }
}

.range-values {
  display: flex;
  align-items: center;

  span {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
  }
}

.speed-range-bar {
  height: 6px;
  background-color: rgba(255, 58, 58, 0.1);
  border-radius: 3px;
  margin: 0 15px;
  flex: 1;
  position: relative;
  overflow: hidden;

  .range-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 58, 58, 0.3), rgba(255, 58, 58, 0.8));
    animation: progress-animation 2s infinite alternate ease-in-out;
  }
}

@keyframes progress-animation {
  0% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(10%);
  }
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 4px 12px rgba(200, 20, 20, 0.3);
  }

  50% {
    box-shadow: 0 4px 20px rgba(255, 58, 58, 0.7);
  }

  100% {
    box-shadow: 0 4px 12px rgba(200, 20, 20, 0.3);
  }
}

.animated-bg {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 58, 58, 0.2) 0%,
        transparent 50%);
    animation: bg-move 10s infinite alternate ease-in-out;
    pointer-events: none;
  }
}

@keyframes bg-move {
  0% {
    --x: 0%;
    --y: 0%;
  }

  25% {
    --x: 100%;
    --y: 0%;
  }

  50% {
    --x: 100%;
    --y: 100%;
  }

  75% {
    --x: 0%;
    --y: 100%;
  }

  100% {
    --x: 50%;
    --y: 50%;
  }
}
</style>